<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-1.12.4.js"></script>
</head>

<body>
    <h1>每日一句</h1>
    <ul id="a"></ul>

    <h2>获取头像</h2>
    <input type="text" name="" id="text">
    <input type="button" value="获取qq头像" id="btn">
    <script>
        $("#btn").click(function () {
            let a = $("#text").val();
            console.log(a);

            let reg = /^[1-9]\d{4,9}$/
            if (reg.test(a) == false) {
                alert("请重新输入")
            } else {
                // 1创建对象xmlhttprequest
                xhr = new XMLHttpRequest();
                // 2-设置相关的回调函数（获得数据之后干什么）
                xhr.onreadystatechange = callback;
                // 3-初始化xmlhttprequest组件
                // let url = "https://api.qqsuu.cn/api/dm-mgjuzi";
                let url = "https://api.qqsuu.cn/api/dm-qt?qq=" + a
                xhr.open("GET", url, true)//true是否进行异步请求
                // 4.发送请求
                xhr.send(null);

                function callback() {
                    // readyState 0=未初始化，1-开始发送请求，2-请求发送完成，3-开始读取响应，4-读取响应结束
                    // status  http=200-正确返回，404-找不到访问对象
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        // let data = xhr.responseText;///返回的数据.text(文本)赋值给data
                        // let data  = JSON.parse(xhr.responseText)
                        let data = xhr.response;
                        console.log(data);
                        console.log(data.data);
                        // let a = document.getElementById("a");
                        let img = document.createElement("img");
                        img.src = url;
                        // list.textContent = data.data.content+"作者："+data.data.author             
                        // a.appendChild(list); 
                        document.body.appendChild(img)
                    } else {
                        // alert("访问异常")
                    }

                }

            }




        })


    </script>

</body>

</html>